<template>
	<view class="login">
		<view class="uni-margin-wrap">
			<swiper class="swiper"  indicator-color="#D8D8D8"  indicator-active-color="#2F83F5" :indicator-dots="true" :autoplay="true" loop :circular="true" :interval="3000" :duration="1000">
				<swiper-item v-for="(item,index) in swiper" :key="index">
					<view class="swiper-item">
						<view class="img_box">
							<image :src="item.img" mode="heightFix" class="img"></image>
						</view>
						<view class="title">
							{{item.title}}
						</view>
						<view class="tilp">
							{{item.tilp}}
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
		
		<view class="block">
			<view class="cell" @tap="createPass(1)">
				<image src="../../static/images/login/importIcon.png" mode="widthFix" class="icon"></image>
				<view class="content">
					<view class="text">
						我有钱包
					</view>
					<view class="msg">
						导入钱包、硬件钱包、多签钱包
					</view>
				</view>
			</view>
			
			<view class="cell mt" @tap="createPass(2)">
				<image src="../../static/images/login/addIcon.png" mode="widthFix" class="icon"></image>
				<view class="content">
					<view class="text">
						我没有钱包
					</view>
					<view class="msg">
						创建钱包
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getChainInfo
	} from '../../http/api.js'
	export default {
		name: "login",
		data() {
			return {
				swiper:[
					{img:'/static/images/login/swiper1.png',title:"多链钱包，安全好用",tilp:"支持主流公链、EVM兼容链及Layer2"},
					{img:'/static/images/login/swiper2.png',title:"私钥自持，资产自我掌控",tilp:"私钥只保留在您的设备，您个人持有"},
					{img:'/static/images/login/swiper3.png',title:"闪兑&跨链",tilp:"更便捷、更安全、更优地完成您的交易"},
					{img:'/static/images/login/swiper4.png',title:"探索丰富的去中心化生态",tilp:"收款、转款、赚取、交易、DAPP、NFT等等"},
				]
			};
		},
		onLoad() {
			this.$store.commit('setAddress', "");
			this.$store.commit('setChain', {});
		},
		methods:{
			// 跳转到创建钱包流程
			createPass(type){
				this.getChain()
				uni.navigateTo({
					url:`/pages/createPass/createPass?type=${type}`
				})
			},
			async getChain() {
				const res = await getChainInfo();
				if (res.code == 200) {
					let list = res.data?.map(chain => ({
						chainId: chain.chainId,
						defultRPC: chain.defultRPC
					}));
					let allchains = uni.getStorageSync('allchains') || {};
					let rpclist = uni.getStorageSync('rpclist') || [];
					if (!allchains || JSON.stringify(allchains) != JSON.stringify(res.data)) {
						this.$store.commit('setAllchains', res.data);
					}
					if (!rpclist || list?.length != rpclist?.length) {
						// 找出 list 中不在 rpclist 中的项
						let newChains = list.filter(chain => !rpclist.some(rpc => rpc.chainId === chain.chainId));
						if (newChains.length > 0) {
							rpclist = [...rpclist, ...newChains];
						}
						uni.setStorageSync('rpclist', rpclist);
						
					}
				}
				this.$updateWalletInfo()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.login {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		.uni-margin-wrap {
			width: 100%;
			padding-top: 100upx;
			.swiper {
				width: 100%;
				height: 600upx;
				.swiper-item {
					display: block;
					text-align: center;
					.img_box{
						display: flex;
						justify-content: center;
						.img{
							width: auto;
							height: 320upx;
						}
					}
					.title{
						margin-top: 70upx;
						font-size: 44upx;
						color: #3D3D3D;
					}
					.tilp{
						font-size: 24upx;
						color: #979797;
						margin-top: 24upx;
					}
				}
			}
		}
	
	
	.block{
		margin: 100upx 0;
		padding: 0 34upx;
		.cell{
			background: #F1F2F5;
			border-radius: 18upx;
			display: flex;
			align-items: center;
			padding: 26upx 28upx;
			.icon{
				width: 52upx;
			}
			.content{
				margin-left: 26upx;
				.text{
					font-size: 28upx;
					color: #3D3D3D;
					font-weight: 400;
				}
				.msg{
					font-size: 20upx;
					color: #979797;
				}
			}
		}
		.mt{
			margin-top: 16upx;
		}
	}
	
	
	}


</style>